<template>
  <el-drawer
    :title="'设置游戏资源位'"
    :visible="visible"
    :size="'calc(100vw - 256px)'"
    :destroy-on-close="true"
    :lock-scroll="false"
    :before-close="confirmClose"
    @update:visible="updateVisible"
    :direction="direction"
    :close-on-click-modal="false"
  >
    <div class="ele-body">
      <el-card shadow="never">
        <!-- 搜索表单 -->
        <el-form
          :model="where"
          label-width="160px"
          class="ele-form-search"
          @keyup.enter.native="reload"
          @submit.native.prevent
        >
          <el-row :gutter="15">
            <!-- <el-col :lg="6" :md="12">
              <el-form-item label="资源位名称:" label-width="120px">
                <el-input clearable v-model="where.title" placeholder="请输入资源位名称" />
              </el-form-item>
            </el-col> -->
            <el-col :lg="4" :md="12">
              <el-form-item label="选择游戏:" label-width="80px">
                <PageSelect
                  clearable
                  :placeholder="'请选择游戏'"
                  v-model="where.game_id"
                  :whereName="'game_name'"
                  :url="'/BoxGame/index'"
                  :optionLable="'game_name'"
                  :optionvalue="'id'"
                  :multiple="false"
                />
              </el-form-item>
            </el-col>

            <!-- <el-col :lg="4" :md="12">
              <el-form-item label="开启状态:">
                <el-select clearable v-model="where.status" placeholder="全部" class="ele-fluid">
                  <el-option :label="'启用'" :value="1" :key="1" />
                  <el-option :label="'禁用'" :value="0" :key="0" />
                </el-select>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :lg="8" :md="12">
              <el-form-item label="">
                <el-date-picker
                  style="width: 100%"
                  v-model="where.create_time"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH-mm-ss"
                  label-format="yyyy-MM-dd HH-mm-ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col> -->

            <el-col :lg="6" :md="12">
              <div class="ele-form-actions">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="reload"
                  >查询
                </el-button>
                <el-button @click="reset">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :where="where"
          :datasource="url"
          :columns="columns"
          :selection.sync="selection"
          height="calc(100vh - 315px)"
        >
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="openEdit()"
              v-if="permission.includes('sys:game-rank:add')"
              >添加
            </el-button>
            <!--          <el-button-->
            <!--            size="small"-->
            <!--            type="danger"-->
            <!--            icon="el-icon-delete"-->
            <!--            class="ele-btn-icon"-->
            <!--            @click="removeBatch"-->
            <!--            v-if="permission.includes('sys:resource-position:dall')">删除-->
            <!--          </el-button>-->
          </template>

          <!-- 操作列 -->
          <template slot="action" slot-scope="{ row }">
            <el-link
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="openEdit(row)"
              v-if="permission.includes('sys:game-rank:edit')"
              >修改
            </el-link>
            <el-popconfirm
              class="ele-action"
              title="确定要删除此资源位吗？"
              @confirm="remove(row)"
            >
              <el-link
                type="danger"
                slot="reference"
                :underline="false"
                icon="el-icon-delete"
                v-if="permission.includes('sys:game-rank:delete')"
                >删除
              </el-link>
            </el-popconfirm>
          </template>

          <template slot="icon" slot-scope="{ row }">
            <el-image
              style="width: 25px"
              :src="row.icon"
              :preview-src-list="[row.icon]"
            />
          </template>
        </ele-pro-table>
      </el-card>
    </div>
  </el-drawer>
</template>

<script>
import { mapGetters } from "vuex";
import PageSelect from "@/components/pageSelect/index.vue";

export default {
  name: "gameBoxResourcePosition",
  components: { PageSelect },
  computed: {
    ...mapGetters(["permission"]),
  },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },
  data() {
    return {
      direction: "rtl",
      // 表格数据接口
      url: "/rank.BoxGameRankingRelation/index",
      // 表格列配置
      columns: [
        {
          columnKey: "selection",
          type: "selection",
          width: 45,
          align: "center",
          fixed: "left",
        },
        {
          prop: "id",
          label: "ID",
          width: 60,
          align: "center",
          showOverflowTooltip: true,
          fixed: "left",
        },
        {
          prop: "game_id",
          label: "游戏ID",
          showOverflowTooltip: true,
          minWidth: 120,
          align: "center",
        },
        {
          prop: "icon",
          label: "图片",
          showOverflowTooltip: true,
          minWidth: 120,
          align: "center",
          slot: "icon",
        },
        {
          prop: "game_name",
          label: "游戏名称",
          showOverflowTooltip: true,
          minWidth: 120,
          align: "center",
        },
        {
          prop: "sort",
          label: "排序",
          showOverflowTooltip: true,
          minWidth: 120,
          align: "center",
        },
        {
          prop: "create_time",
          label: "创建时间",
          sortable: "custom",
          showOverflowTooltip: true,
          minWidth: 160,
          align: "center",
        },
        {
          prop: "update_time",
          label: "更新时间",
          sortable: "custom",
          showOverflowTooltip: true,
          minWidth: 160,
          align: "center",
        },
        {
          columnKey: "action",
          label: "操作",
          width: 150,
          align: "center",
          resizable: false,
          slot: "action",
          fixed: "right",
        },
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
    };
  },
  watch: {
    visible(val) {
      if (val) {
        if (this.data) {
          this.where.id = this.data.id;
        }
      }
    },
  },
  methods: {
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({ where: this.where });
    },
    /* 重置搜索 */
    reset() {
      this.where = { id: this.data.id };
      this.reload();
    },
    /* 显示编辑 */
    openEdit(row) {
      if (row === undefined) {
        row = { rank_id: this.data.id };
      }
      this.$emit("gameResourcePositionEdit", row);
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      this.$http
        .post("/rank.BoxGameRankingRelation/delete", { id: row.id })
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要删除选中的游戏吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          this.$http
            .post("/pindao.BoxGameRankingRelation/delete", {
              id: this.selection.map((d) => d.id),
            })
            .then((res) => {
              loading.close();
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => {});
    },

    /* 更改状态 */
    status(row) {
      const loading = this.$loading({ lock: true });
      let params = Object.assign({
        id: row.id,
        status: row.status,
      });
      this.$http
        .post("/pindao.BoxGameRankingRelation/status", params)
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
          } else {
            row.status = !row.status ? 1 : 0;
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },

    /* 二次确认框 */
    confirmClose() {
      this.$confirm("确定要返回吗？", "温馨提示")
        .then(() => {
          this.updateVisible(false);
          this.initForm();
        })
        .catch(() => {});
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
  },
};
</script>

<style scoped></style>
